<template>
    <div class="login">
      <el-form v-model="login" :rules="rules"  style="width: 400px;padding-top: 80px;margin-left: 40px;"
      ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
            label="用户名"
            prop="username"
        >
            <el-input  v-model="login.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="密码"
            prop="password"
        > <el-input type="password" v-model="login.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>没有账号？ 
            <router-link :to="{name:'regist'}" >去注册</router-link>
            </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="jump">登陆</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default ({
    name:'login',
    data(){
        //表单验证格式
        let validateUsername = (rule, value, callback)=>{
            if(this.login.username == null){
                return callback(new Error('请输入用户名'))
            }else{
               console.log(this.login.username)
            }
        }
        let validatePassword = (rule, value, callback)=>{
            if(this.login.password == null){
                return callback(new Error('请输入密码'))
            }else{
                console.log(this.login.password)
            }
        }
        return{
            login:{
                username:'',
                password:'',
            },
            rules:{
                username:[
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password:[
                    { validator: validatePassword, trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        async jump(){
            //登陆请求
            const data = await this.aPost('/user/login',this.login);
            localStorage.setItem('user',JSON.stringify(data.user))
            localStorage.setItem('id',data.user._id)
            if(data.success == true){
                this.$router.push({
                    name:'admin'
                })
            }
        }
    }
})
</script>
<style >
.login{
    height: 350px;
    width: 550px;
    box-shadow: 0 0 6px #333;
    margin: 100px auto;
}
</style>